{% extends 'base.html' %}

{% block title %}入库操作 - 库存信息管理系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header bg-primary text-white">
        <h4 class="mb-0">物品入库</h4>
    </div>
    <div class="card-body">
        <form method="POST" id="stockInForm">
            <div class="row g-3">
                <div class="col-md-6">
                    <label for="name" class="form-label">物品名称 *</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>

                <div class="col-md-6">
                    <label for="specification" class="form-label">规格型号</label>
                    <input type="text" class="form-control" id="specification" name="specification" placeholder="例如：100ml/瓶">
                </div>

                <div class="col-md-6">
                    <label for="material" class="form-label">材质</label>
                    <input type="text" class="form-control" id="material" name="material" placeholder="例如：塑料、金属">
                </div>

                <div class="col-md-6">
                    <label for="unit" class="form-label">单位 *</label>
                    <input type="text" class="form-control" id="unit" name="unit" required placeholder="例如：个、件、瓶">
                </div>

                <div class="col-md-6">
                    <label for="price" class="form-label">单价 (元) *</label>
                    <input type="number" min="0" step="0.01" class="form-control" id="price" name="price" required>
                </div>

                <div class="col-md-6">
                    <label for="quantity" class="form-label">数量 *</label>
                    <input type="number" min="1" class="form-control" id="quantity" name="quantity" required>
                </div>

                <div class="col-md-12">
                    <label for="total_value" class="form-label">总价值 (元)</label>
                    <input type="number" step="0.01" class="form-control" id="total_value" readonly>
                    <small class="form-text text-muted">总价值 = 单价 × 数量，系统自动计算</small>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">确认入库</button>
                <button type="reset" class="btn btn-outline-secondary ms-2">重置</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 自动计算总价值
    document.addEventListener('DOMContentLoaded', function() {
        const priceInput = document.getElementById('price');
        const quantityInput = document.getElementById('quantity');
        const totalValueInput = document.getElementById('total_value');

        function calculateTotal() {
            const price = parseFloat(priceInput.value) || 0;
            const quantity = parseInt(quantityInput.value) || 0;
            const total = price * quantity;
            totalValueInput.value = total.toFixed(2);
        }

        priceInput.addEventListener('input', calculateTotal);
        quantityInput.addEventListener('input', calculateTotal);

        // 表单重置时清空总价值
        document.getElementById('stockInForm').addEventListener('reset', function() {
            setTimeout(calculateTotal, 0);
        });
    });
</script>
{% endblock %}